<!--  项目的跟组件 -->
<template id="">
    <div>
        <!-- 1.0利用mint-ui中的header组件实现整个系统的头部 -->
    <mt-header fixed title="随处留心"></mt-header>
    <!--1.0.1 统一的返回按钮-->
	<div v-if="isshow" id="back">
		<a href="javascript:void(0)" @click="backto">返回</a>
	</div>

    <!-- 2；路由占位符 -->
    <router-view></router-view>


    <!-- 3.0利用mui中的tabbar组件实现系统的底部 -->
    <nav class="mui-bar mui-bar-tab">
		<router-link class="mui-tab-item" to="/home">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</router-link>
		<router-link class="mui-tab-item" to="/tabbar-with-chat">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">会员</span>
		</router-link>
		<router-link class="mui-tab-item" to="/shopcar">
			<span class="mui-icon mui-icon-contact"><span class="mui-badge" id="badge">0</span></span>
			<span class="mui-tab-label">购物车</span>
		</router-link>
		<router-link class="mui-tab-item" to="/tabbar-with-map">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">搜索</span>
		</router-link>
	</nav>
    </div>
</template>

<script type="text/javascript">
    //谁用谁导入，按需导入。
    import { Toast } from 'mint-ui';

    import {vmmy,COUNTSTR} from './kits/vm.js';
    // 利用 vm.$on() 来注册 COUNTSTR这个常量代表的事件
	vmmy.$on(COUNTSTR,function(count){
		// 将count值追加到购物车中
		var badgeobj = document.querySelector('#badge');
		badgeobj.innerText = parseInt(badgeobj.innerText) + count;
	});

    //负责导出 .vue这个对象(本质上是一个vue对象。组件vue中的定义这里都可以使用。)
    export default {
        data() {  //这是es6语法。等价于es5的 data:function() { .
            return {
                msg: 'hello vuejs!hahhahah我是',
                isshow: false
            }
        },
        watch: {
            '$route':function (newroute, oldroute) {
                if (newroute.path.toLowerCase() == '/home' ) {
                    this.isshow = false;
                } else {
                    this.isshow = true;
                }
            }
        },
        methods: {
            tip: function () {
                Toast('你好，welcome!')
            },
            backto(){
                // 利用路由对象中的go(-1)来实现返回到上一级页面(这个方法是vue-router的方法)
				this.$router.go(-1);
            }
        },
        created() {

        }
    }
</script>

<style scoped>
    /*当前页面的css样式写到这里。添加scoped后，表示里面的样式只在本页面有效。不会影响到其他组件页面。*/
    .red {
        color: red;
    }
    #back{
	width: 60px;
	position: absolute;
	top:10px;
	left:10px;
	z-index: 101;
}
#back a{
	color:white;
	font-size: 16px;
	font-weight: bold;
}
</style>
